<template>
	<transition name='move'>
		<default-wrap :title="title">
			<div class='order' slot='body'>
				<van-tabs v-model="active" @click="toggle">
				  <van-tab v-for="(item1, index1) in tabs" :title="item1" :key="item1.id" class='tab-item'>
					<div class='pro-item' v-for="(item1, index1) in orders" :key="item1.id">
						<div class="shop flex-y w">
		              	  <!-- 循环店铺 -->
			              <img class="cart-shop-cover" :src="item1.cover"></img>
			              <div class="flex1 flex-y" style="color: #222; font-size: 14px; letter-spacing: 1px">
			              	{{ item1.name }}
			                <Icon type="ios-arrow-right" class='icon'></Icon>
			              </div>

			              <div class='ordernum'>
			              	订单编号
			              	{{ item1.ordernum }}
			              </div>
			            </div>
						
						<div>
							<van-card
							  :title="item2.name"
							  :num="item2.num"
							  :price="item2.true_price"
							  :thumb="item2.cover"
							  v-for="(item2, index2) in item1.products"
							  :key="item2.a"
							/>
						</div>

						<div class='btn-wrap' v-if="params.status == '0'">
							<Button type="error">取消付款</Button>
							<Button type="success">去支付</Button>
						</div>

						<div class="btn-wrap" v-else-if="params.status == '1'">
							<Button type="error">取消订单</Button>
							<Button type="info">提醒发货</Button>
						</div>

						<div class="btn-wrap" v-else-if="params.status == '2'">
							<Button type="success">确认收货</Button>
						</div>

						<div class='btn-wrap' v-if="params.status == '3'">
							<Button type="success">评价</Button>
						</div>
					</div>	
				  </van-tab>

				  <prompt :prompt="prompt"></prompt>
				</van-tabs>
			</div>
		</default-wrap>
	</transition>		
</template>

<script>
	import Prompt     		from 'base/prompt'
	import DefaultWrap  	from 'base/default-wrap'

	export default{
		components: {
			Prompt,
			DefaultWrap
		},
		data() {
			return {
				title		  : '订单列表',
				active 		  : 0,
				tabs 		  : ['待支付', '待发货', '待收货', '待评论'],
				prompt        : {
					hidden	  : false,
					loading   : false,
					title     : '订单列表',
					text      : '空空如也'
				},
				params 		  : {
					p 		  : 1,
					limit	  : 8,
					status    : 0,
				},
				orders 		  : []
			}
		},
		created() {
			let s 	      		 = this.$route.query.status
			if(s) this.active    = s
			this.getOrder(s)
		},
		methods: {
			getOrder(s) {
				let params 				= this.params
				let prompt 				= this.prompt
					prompt.hidden 		= !1
					prompt.loading 		= !0
					params.status 		= s
				setTimeout(() => {
					this.HttpService.GOrder(params).then(data => {
						let d          	 	= data.data
						this.orders 		= d
						prompt.loading 		= !1

						if( !d || d.length === 0) {
							prompt.hidden = !0
						}
					})
				}, 500)
			},
			toggle(i, t){
				this.getOrder(i)
				this.$router.push('/order/lists?status=' + i)
			},
			back() {
				this.$router.back()
			},
			goHome() {
				this.$router.push('/home/index')
			}
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	@import "~@/common/stylus/confirm.styl"
	
	.order
		position: absolute
		left: 0
		right: 0
		bottom: 0
		top: 0
		background-color: #fff
	
</style>